<template>
  <section>
    <el-dialog model-value :before-close="onClose" :close-on-click-modal="false" title="批量设置" append-to-body width="800px">
      <el-form ref="formRef" :inline="false" :model="dataForm" label-width="180px">
        <el-form-item label="公司">
          <el-select :model-value="computedData.companyCode" disabled style="width:100%">
            <el-option v-for="item in computedData.companyList" :key="item.value" :label="item.label + '[' + item.value + ']'" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="部门">
          <el-select :model-value="computedData.orgCodeList" disabled multiple style="width:100%">
            <el-option v-for="item in computedData.orgList" :key="item.orgCode" :label="item.orgName + '[' + item.orgCode + ']'" :value="item.orgCode"/>
          </el-select>
        </el-form-item>
        <el-form-item label="默认预算成本中心" prop="budgetCostCenterId">
          <el-select v-model="dataForm.budgetCostCenterId" :loading="budgetLoading"
            :remote-method="getBudgetData" clearable filterable placeholder="请输入成本中心编码/名称搜索" style="width:100%" remote reserve-keyword>
            <el-option v-for="item in budgetData" :key="item.id" :label="item.label + '[' + item.centerCode + ']'"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="默认核算成本中心" prop="checkCostCenterId">
          <el-select v-model="dataForm.checkCostCenterId" :loading="checkLoading"
            :remote-method="getCheckData" clearable filterable placeholder="请输入成本中心编码/名称搜索" style="width:100%" remote reserve-keyword>
            <el-option v-for="item in checkData" :key="item.id" :label="item.label + '[' + item.centerCode + ']'"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="公司外可用预算成本中心" prop="outerBudgetCostCenterId">
          <el-select v-model="dataForm.outerBudgetCostCenterId" :loading="outBugetLoading" multiple
            :remote-method="getOutBudgetData" clearable filterable placeholder="请输入成本中心编码/名称搜索" style="width:100%" remote reserve-keyword>
            <el-option v-for="item in outBudgetData" :key="item.id" :label="item.label + '[' + item.centerCode + ']'"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onClose">取消</el-button>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </section>
</template>

<script>
/*
 * File Created: 2023-05-16 15:58:00
 * Author: 余保林 (yubaolin6@outlook.com)
 * Desc: 批量更新
 * Last Modified: 2023-05-16 15:58:30
 * Modified By: 余保林 (yubaolin6@outlook.com>)
 */

import api from "@/api/index";
import { ElMessage } from 'element-plus'
import { reactive, toRefs} from 'vue';

export default {
  components: {
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    // 同一公司列表
    selectList: {
      type: Array,
      default: () => []
    }
  },
  emits: ['on-update', 'handleClose', 'on-close'],
  setup (props, context) {
    const state = reactive({
      formRef: null,
      depCascader: null,
      dataForm: {
        budgetCostCenterId: '',
        checkCostCenterId: '',
        outerBudgetCostCenterId: '',
      },
      budgetData: [],
      checkData: [],
      outBudgetData: [], // 公司外可用预算成本中心
      budgetLoading: false,
      checkLoading: false,
      outBugetLoading: false
    })

    const computedData = computed(() => {
      let first = props.selectList[0]

      return {
        companyCode: first.companyCode,
        companyList: [
          {value: first.companyCode, label: first.companyName}
        ],
        orgCodeList: props.selectList.map(item => item.orgCode),
        orgList: props.selectList
      }
    })

    const methods = {
      getBudgetData (query) {
        if (!computedData.value.companyCode) return
        let params = {
          orgCode: computedData.value.companyCode,
          codeOrName: query
        }
        state.budgetLoading = true
        api.costCenter.budgetCostCenterList(params).then(res => {
          state.budgetData = res.list
          state.budgetLoading = false
        }).catch(() => {
          state.budgetLoading = false
        })
      },
      getCheckData (query) {
        if (!computedData.value.companyCode) return
        let params = {
          orgCode: computedData.value.companyCode,
          codeOrName: query
        }
        state.checkLoading = true
        api.costCenter.checkCostCenterList(params).then(res => {
          state.checkData = res.list
          state.checkLoading = false
        }).catch(() => {
          state.checkLoading = false
        })
      },
      getOutBudgetData(query) {
        let params = {
          codeOrName: query
        }
        state.outBugetLoading = true
        api.costCenter.budgetCostCenterList(params).then(res => {
          state.outBudgetData = res.list
          state.outBugetLoading = false
        }).catch(() => {
          state.outBugetLoading = false
        })
      }
    }


    const handler = {
      // 关闭
      onClose () {
        state.formRef.resetFields()
        state.formRef.clearValidate()
        context.emit('on-close')
      },
      // 提交
      onSubmit () {
        if (!state.formRef) return

        state.formRef.validate((valid, fields) => {
          if (valid) {
            if(!state.dataForm.budgetCostCenterId && !state.dataForm.checkCostCenterId && state.dataForm.outerBudgetCostCenterId.length == 0) {
              return ElMessage.warning('请至少配置一种成本中心')
            }

            let data = {
              ...state.dataForm,
              companyList: props.selectList.map(item => {
                return {
                  id: item.id,
                  orgCode: item.orgCode,
                  orgName: item.orgName,
                  companyCode: item.companyCode,
                  companyName: item.companyName
                }
              })
            }

            api.costCenter.batchEditCostCenter(data).then(res => {
                context.emit('on-update')
                handler.onClose()
                ElMessage.success('操作成功')
              })
          } else {
            console.log('error submit!')
            return false
          }
        })
      }
    }

    // 用外层v-if控制初始化请求一次
    methods.getBudgetData('')
    methods.getCheckData('')
    methods.getOutBudgetData('')

    return {
      ...toRefs(state),
      ...methods,
      ...handler,
      computedData
    }
  }
}
</script>

<style scoped></style>
